<template>
  <div>
    <el-form :model="questionForm" @submit.native.prevent="createQuestion">
      <el-form-item label="题目类型">
        <el-select v-model="questionForm.type" placeholder="请选择题目类型">
          <el-option label="单选" value="radio"></el-option>
          <el-option label="多选" value="checkbox"></el-option>
          <el-option label="问答" value="textarea"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="题目标题">
        <el-input v-model="questionForm.title"></el-input>
      </el-form-item>
      <el-form-item label="题目描述">
        <el-input v-model="questionForm.description"></el-input>
      </el-form-item>
      <el-button type="primary" @click="createQuestion">创建题目</el-button>
    </el-form>
    <create-option v-if="questionId && questionForm.type !== 'textarea'" :question-id="questionId" @option-created="addOption"></create-option>
  </div>
</template>
  
  <script>
  import axios from 'axios';
  import request from '../../utils/request';
  import CreateOption from './CreateOption.vue';
  
  export default {
    components: { CreateOption },
    props: ['surveyId'],
    data() {
      return {
        questionForm: {
          title: '',
          type: '',
          description: '',
          surveyId:this.surveyId,
        },
        questionId: null,
        options:[]
      };
    },
    methods: {
      async createQuestion() {
        try {
          const response = await request.post('api/question/create', null,{params:this.questionForm
          });
          if(response.code==="200"){
          this.questionId = response.data.id;
          this.options=response.data.options;
          this.$emit('question-created', response.data);
          console.log('6666'+'   '+this.questionId);
          }
        } catch (error) {
          console.error('创建题目失败:', error);
        }
      },
      
      addOption(option){
        this.options.push(option);
      },

      async removeOption(optionId){
        try{
            await request.delete('api/option/delete',{params:{
                id:optionId,
            }});
            this.options = this.options.filter(o => o.id !== optionId);
        }catch(error){
            console.error('删除选项失败捏:',error)
        }
      }
    }
  };
  </script>
  
  <style scoped>
  /* 样式可根据需要调整 */
  </style>
  